<template>
	<view>
		<!-- 首页轮播 ,使用快捷方式uswiper直接生成-->
		<swiper class="swiper" 
		:indicator-dots="true" 
		:autoplay="true" 
		indicator-color="#7d7c82"
		:indicator-active-color="activeBtn" 
		:interval="3000" 
		:duration="1000" 
		@change="swiperChange" 
		:style="{height:swiperHight}">
			<swiper-item v-for="(item,index) in content" :key="index">	
				<view class="swiper-item">
					<!-- <navigator :url="item.url" hover-class="none"> -->
						<image :src="item.url" mode="" :style="{width:width,height:height}"></image>
					<!-- </navigator> -->
				</view>
			</swiper-item>
		 <!-- 以下注释的内容是写死的方法 -->
			<!-- <swiper-item>
				<view class="swiper-item">
					<image src="/static/image/banner2.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="/static/image/banner3.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="/static/image/banner4.jpg" mode=""></image>
				</view>
			</swiper-item> -->
		</swiper>
	</view>
</template>

<script>
	export default {
		props:['content','swiperHight','activeBtn','width','height'],
		data() {
			return {
				imgUrl:this.$imgUrl
			};
		},
		methods:{
			swiperChange(e){
			// console.log(e.detail)
			}
		}
	}
</script>

<style>
.swiper {
		width: 100%;
		border-radius: 16rpx;
	}

	.swiper image {
		display: block;
		margin: 0 auto;
		border-radius: 16rpx;
	}
</style>
